<template>
  <div>
    <p>
      <button class="btn btn-white btn-default btn-round" @click="list(1)">
        <i class="ace-icon fa fa-refresh"></i>
        刷新
      </button>
    </p>

    <pagination ref="pagination" :list="list"></pagination>

    <table id="simple-table" class="table  table-bordered table-hover">
      <thead>
        <tr>
          <th>id</th>
          <th>相对路径</th>
          <th>文件名</th>
          <th>后缀</th>
          <th>大小</th>
          <th>用途</th>
        </tr>
      </thead>

      <tbody>
        <tr v-for="file in files"
          :key="file.id"
          :index="file.id">
          <td>{{file.id}}</td>
          <td>{{file.path}}</td>
          <td>{{file.name}}</td>
          <td>{{file.suffix}}</td>
          <td>{{file.size | formatFileSize}}</td>
          <td>{{FILE_USE | optionKV(file.use)}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
  import Pagination from "../../components/pagination"

  export default {
    name: "file-file",
    components: {Pagination},
    data() {
      return {
        files: [],
        FILE_USE: FILE_USE,
      }
    },
    mounted() {
      let _this = this
      _this.list(1)
    },
    methods: {
      /**
       * 获取文件（分页）
       * @param page
       */
      list(page) {
        let _this = this

        Loading.show()

        _this.$axios.post(process.env.VUE_APP_SERVER + '/file/admin/file/list', {
          page: page,
          size: _this.$refs.pagination.size
        }).then((resp) => {
          if (resp.data.success) {
            _this.files = resp.data.content.list
            _this.$refs.pagination.render(page, resp.data.content.total)

            Loading.hide()
          } else {
            Loading.hide()
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>